
<form class="form-horizontal" id="userDetailForm">
    <input class="hidden" name="userId" th:value="${user.userId}">
    <div class="box-body">
        <div class="form-group">
            <label  class="col-sm-3 control-label">用户名 :</label>
            <div class="col-sm-8">
                <input  name="username" class="form-control" readonly="readonly" min="3" require="必填项"  placeholder="" th:value="${user.username}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">所属部门 :</label>
            <div class="col-sm-8">
                <input type="text" class="form-control cursor-pointer" id="deptNameDetail" name="deptNameDetail" th:value="${user.deptName}" onclick="showDeptDetailList(1)" readonly="readonly">
                <input type="hidden" id="deptIdDetail" name="deptId" th:value="${user.deptId}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">邮箱 :</label>
            <div class="col-sm-8">
                <input name="email" class="form-control" placeholder="" th:value="${user.email}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">区域：</label>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">省</label>
            <div class="col-sm-8">
                <select id="areaSelects" class="select2"></select>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">市</label>
            <div class="col-sm-8">
                <select id="areaSelectsCities" class="select2"></select>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">县/区</label>
            <div class="col-sm-8">
                <select id="areaSelectscounties" class="select2"></select>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">镇/街道</label>
            <div class="col-sm-8">
                <select id="areaSelectstowns" class="select2"></select>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">村</label>
            <div class="col-sm-8">
                <select id="areaSelectsvillages" class="select2"></select>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">详细区域</label>
            <div class="col-sm-8">
                <input name="adders" id="adders" class="form-control"  th:value="${user.adders}" >
            </div>
        </div>


        <div class="form-group">
            <label  class="col-sm-3 control-label">电话 :</label>

            <div class="col-sm-8">
                <input name="phone" class="form-control" placeholder="" th:value="${user.phone}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">性别 :</label>
            <div class="col-sm-8">
                <select name="sex" class="form-control" require="必填项">
                    <option th:selected="${user.sex==1}" value="1">男</option>
                    <option th:selected="${user.sex==2}" value="2">女</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">年龄 :</label>
            <div class="col-sm-8">
                <input name="age" class="form-control" placeholder="" th:value="${user.age}">
            </div>
        </div>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <div class="pull-right">
            <input id="arreaidsLoad" type="hidden" name="arreaids" th:value="${user.arreaids}">
            <button type="button" id="saveDetailUser" class="btn btn-info">确定</button>
            <button  type="button" data-dismiss="modal" class="btn btn-default">取消</button>
        </div>
    </div>
    <!-- /.box-footer -->

</form>


<link rel="stylesheet" th:href="@{/libs/selectpage/selectpage.css}"/>
<script th:src="@{/libs/ztree/js/jquery.ztree.core.js}"></script>
<script th:src="@{/libs/ztree/js/jquery.ztree.excheck.js}"></script>
<script th:src="@{/libs/ztree/js/jquery.ztree.exedit.js}"></script>
<script th:src="@{/js/core.js}"></script>
<script th:src="@{/libs/select/select2.min.js}"></script>
<script>
    var objSelect;

    $(function () {
        $("#saveDetailUser").on('click', function () {
            var arreaids = getAdderId();
            $("#arreaidsLoad").val(arreaids);
            if (doValidForm(userDetailForm)) {
                Core.mask("#saveDetailUser");
                Core.postAjax("/sys/user/edit",$("#userDetailForm").serialize(),function (data) {
                    if (data.status == 200) {
                        Core.unmask("#saveDetailUser");
                        $("#userDetailModal").modal("hide");
                        $("#myModal").modal("hide");
                        Core.refreshTable("#table",true);
                    }
                    layer.msg(data.msg);
                })
            }
        });
        //如果搜索框无法输入请打开加下此代码
        $.fn.modal.Constructor.prototype.enforceFocus = function () {};

        var arreaidsLoad= $("#arreaidsLoad").val();
        ajaxInitAreaData(arreaidsLoad);
    });



    function ajaxInitAreaData(areaIds) {
        $.ajax({
            url: '/sys/area/list?areaIds='+areaIds,
            type: 'GET',
            dataType: "json",
            success: function (ret) {
                if (ret.status == 200) {
                    var areaArray = ret.data;
                    var shenPid = areaArray[0].id;
                    var shenText = areaArray[0].text;

                    var shiPid = areaArray[1].id;
                    var shiText = areaArray[1].text;

                    var xianPid = areaArray[2].id;
                    var xianText = areaArray[2].text;

                    var zhenPid = areaArray[3].id;
                    var zhenText = areaArray[3].text;

                    var cunPid = areaArray[4].id;
                    var cunText = areaArray[4].text;

                    initAreaData(shenPid,shenText,shiPid,shiText,xianPid,xianText,zhenPid,zhenText,cunPid,cunText);
                }else{
                    initAreaData(489921,"广东省",509649,"河源市",510883,"东源县",510901,"灯塔镇",510907,"灯塔村委会");
                }
            }
        });
    }

    function  initAreaData(shenPid,shenText,shiPid,shiText,xianPid,xianText,zhenPid,zhenText,cunPid,cunText) {
        loadData("areaSelects",0)//省
        defaultSelect("areaSelects",shenPid,shenText);

        loadData("areaSelectsCities",shenPid);//市
        defaultSelect("areaSelectsCities",shiPid,shiText);

        loadData("areaSelectscounties",shiPid);//县
        defaultSelect("areaSelectscounties",xianPid,xianText);

        loadData("areaSelectstowns",xianPid);//镇
        defaultSelect("areaSelectstowns",zhenPid,zhenText);

        loadData("areaSelectsvillages",zhenPid);//村
        defaultSelect("areaSelectsvillages",cunPid,cunText);

    }
    function defaultSelect(objId,id,text) {
        var option = new Option(text, id, true, true);
        objSelect.append(option);
        objSelect.trigger('change');//使用这个方法显示到select2上.
        $("#"+objId+"").trigger('change');
    }


    // 获取选中对象
    $("#areaSelects").on("change", function(e) {
        var pid = $("#areaSelects option:checked").val();
       loadData("areaSelectsCities",pid);//市
    });
    $("#areaSelectsCities").on("change", function(e) {
        var pid = $("#areaSelectsCities option:checked").val();
        loadData("areaSelectscounties",pid);//县
    });
    $("#areaSelectscounties").on("change", function(e) {
        var pid = $("#areaSelectscounties option:checked").val();
        loadData("areaSelectstowns",pid);//镇
    });
    $("#areaSelectstowns").on("change", function(e) {
        var pid = $("#areaSelectstowns option:checked").val();
        loadData("areaSelectsvillages",pid);//村
    });

    function loadData(objId,pid){
      objSelect =  $("#"+objId+"").select2({
            placeholder: '拼音首字母搜索',
            width:200,
            cache: true,
            ajax: {
                url:"/sys/area/list?pid="+pid,//请求的API地址
                dataType: 'json',//数据类型
                cache: true,
                data:function(params){
                    var query = {
                        search: params.term,
                        type: 'public'
                    }
                    return query;
                },
                processResults:function(ret){
                    return {
                        results: ret.data
                    };
                }//返回的结果
            }
        });//启动select2
        return objSelect;
    }

    function getAdderId(){
        var shenpid = $("#areaSelects option:checked").val();
        var shiPid = $("#areaSelectsCities option:checked").val();
        var xianPid = $("#areaSelectscounties option:checked").val();
        var zhenPid = $("#areaSelectstowns option:checked").val();
        var cunPid = $("#areaSelectsvillages option:checked").val();
        return shenpid+","+shiPid+","+xianPid+","+zhenPid+","+cunPid;
    }


    /*选择上级菜单树*/
    function showDeptDetailList(flag) {
        var ztreeDeatil;
        //树-初始化设置
        var treeSetting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId"
                }
            }
        };
        Core.postAjax('/sys/dept/query', {flag: "2"}, function (data) {
            var topMenu = {
                name: "顶层菜单",
                id: 0,
                parentId: "",
                type: 0
            }
            //data.unshift(topMenu);
            $.each(data, function (i, item) {
                item.open = true;
            })
            ztreeDeatil = $.fn.zTree.init($("#deptDetailTree"), treeSetting, data);
            layer.open({
                type: 1,
                offset: '50px',
                title: "选择组织",
                area: ['300px', '450px'],
                content: $("#deptListLayer"),
                btn: ['确定', '取消'],
                btn1: function (index) {
                    var node = ztreeDeatil.getSelectedNodes();
                    if (node.length == 0) {
                        layer.msg("请选择一个菜单！", function () {
                        });
                        return;
                    }
                    $("#deptIdDetail").val(node[0].id);
                    $("#deptNameDetail").val(node[0].name);
                    layer.close(index);
                }
            });
        });
    }

</script>